<template>
    <div class="product_detail">
        <div class="product_detail_top" id="product_detail_top">
            <div class="product_detail_top_img">
                <van-swipe lazy-render ref="ticketSwiper" v-if="realSrcList.length">
                    <van-swipe-item v-for="(image, index) in realSrcList" :key="image">
                        <van-image class="product_detail_top-image" :src="image + '?x-oss-process=image/resize,w_300'"
                            @click="enlargeImage(index)" />
                    </van-swipe-item>
                </van-swipe>
                <van-image :src="errImg" v-if="!realSrcList.length"> </van-image>
            </div>
            <div class="product_detail_top_details">
                <div class="info">
                    <span class="price" v-if="hmMechanismsList.cooperationMode == '分佣'">￥{{
                        hmMechanismsList.price }}</span>
                    <span class="price" v-if="hmMechanismsList.cooperationMode == '供货'">￥{{
                        hmMechanismsList.costPrice }}</span>
                    <div class="costPrice" v-if="hmMechanismsList.cooperationMode == '分佣'">
                        成本：{{ hmMechanismsList.costPrice }}
                    </div>

                    <span class="commission" v-if="hmMechanismsList.cooperationMode == '分佣'">佣{{
                        hmMechanismsList.commission + "%" }}</span>
                </div>
                <span class="liveStreamingMechanism">机制:{{
                    hmMechanismsList.liveStreamingMechanism
                    }}</span>
                <div class="styleName">{{ detailInfo.styleName }} <div class="liveStreamingMechanisms"
                        v-if="hmMechanismsList1.cooperationMode"> 多机制
                    </div>
                </div>
                <div class="brand">
                    <span>类目名：{{ detailInfo.productCategoryName }}</span>
                </div>
                <div class="deails-size">
                    <div class="brand">
                        <span>品牌名：{{ detailInfo.brandName }}</span>
                    </div>
                </div>
                <div class="styleCode">商品编码：{{ detailInfo.productsId }}</div>
                <div class="styleCode">69码：{{ detailInfo.styleCode }}</div>
                <div class="deails-size">
                    <div class="brand">
                        <div>规格/材质：{{ detailInfo.specs }}</div>
                    </div>
                </div>
                <div class="merchant-style">
                    <div class="merchant-style-size">
                        供应商名称：{{ detailInfo.supplierName }}
                        <div class="merchant-style-btn" :style="{
                            background:
                                detailInfo.sellStatus == '已签署' ? '#E7FDEE' : '#EFEFEF',
                            color: detailInfo.sellStatus == '已签署' ? '#19D11B' : '#B8BECA',
                        }">
                            {{ detailInfo.sellStatus }}
                        </div>
                    </div>
                    <div class="launch">
                        {{ detailInfo.coreName }}
                    </div>
                    <!-- <div class="merchant-style-btn1">有AB货</div> -->
                </div>
            </div>
        </div>
        <div class="product_detail_title--heng"></div>
        <div class="product_detail_title--content">
            <div class="product_detail_title-content-size">核价信息</div>
            <div class="mechanism_title">机制一：</div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name">合作方式：</div>
                <div class="product_detail_title-content-info-content">
                    {{ hmMechanismsList.cooperationMode }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name">直播机制：</div>
                <div class="product_detail_title-content-info-content">
                    {{ hmMechanismsList.liveStreamingMechanism }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name">成本价：</div>
                <div class="product_detail_title-content-info-content">
                    {{ hmMechanismsList.costPrice }}
                </div>
            </div>
            <div class="product_detail_title-content-info" v-if="hmMechanismsList.cooperationMode == '分佣'">
                <div class="product_detail_title-content-info-name">售价：</div>
                <div class="product_detail_title-content-info-content">
                    {{ hmMechanismsList.price }}
                </div>
            </div>
            <div class="product_detail_title-content-info" v-if="hmMechanismsList.cooperationMode == '分佣'">
                <div class="product_detail_title-content-info-name">佣金：</div>
                <div class="product_detail_title-content-info-content">
                    {{ hmMechanismsList.commission }}%
                </div>
            </div>
            <div class="product_detail_title-content-info" v-if="hmMechanismsList.cooperationMode == '分佣'">
                <div class="product_detail_title-content-info-name">补充佣金：</div>
                <div class="product_detail_title-content-info-content">
                    {{ hmMechanismsList.brokerage }}%
                </div>
            </div>

            <div v-if="hmMechanismsList1.cooperationMode">
                <div class="mechanism_title">机制二：</div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name">合作方式：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList1.cooperationMode }}
                    </div>
                </div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name">直播机制：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList1.liveStreamingMechanism }}
                    </div>
                </div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name">成本价：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList1.costPrice }}
                    </div>
                </div>
                <div class="product_detail_title-content-info" v-if="hmMechanismsList1.cooperationMode == '分佣'">
                    <div class="product_detail_title-content-info-name">售价：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList1.price }}
                    </div>
                </div>
                <div class="product_detail_title-content-info" v-if="hmMechanismsList1.cooperationMode == '分佣'">
                    <div class="product_detail_title-content-info-name">佣金：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList1.commission }}%
                    </div>
                </div>
                <div class="product_detail_title-content-info" v-if="hmMechanismsList1.cooperationMode == '分佣'">
                    <div class="product_detail_title-content-info-name">补充佣金：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList1.brokerage }}%
                    </div>
                </div>
            </div>
            <div v-if="hmMechanismsList2.cooperationMode">
                <div class="mechanism_title">机制三：</div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name">合作方式：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList2.cooperationMode }}
                    </div>
                </div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name">直播机制：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList2.liveStreamingMechanism }}
                    </div>
                </div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name">成本价：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList2.costPrice }}
                    </div>
                </div>
                <div class="product_detail_title-content-info" v-if="hmMechanismsList2.cooperationMode == '分佣'">
                    <div class="product_detail_title-content-info-name">售价：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList2.price }}
                    </div>
                </div>
                <div class="product_detail_title-content-info" v-if="hmMechanismsList2.cooperationMode == '分佣'">
                    <div class="product_detail_title-content-info-name">佣金：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList2.commission }}%
                    </div>
                </div>
                <div class="product_detail_title-content-info" v-if="hmMechanismsList2.cooperationMode == '分佣'">
                    <div class="product_detail_title-content-info-name">补充佣金：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList2.brokerage }}%
                    </div>
                </div>
            </div>



            <div class="product_detail_title-content-info" style="margin-top: 35px">
                <div class="product_detail_title-content-info-name">贸易方式：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo.tradeMode }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name">{{ detailInfo.type == '1' ? '研发部：' : '招商部：' }}</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo.recruiterDept }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name">{{ detailInfo.type == '1' ? '研发专员：' : '招商员：' }}
                </div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo.recruiter }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name">走仓：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo.warehouse ? '是' : '否' }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name" style="white-space: nowrap; padding-right: 40px">
                    对接群名：</div>
                <div class="product_detail_title-content-info-content" style="text-align: end">
                    {{ detailInfo.groupName }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name">发起时间：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo.updateTime }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name" style="white-space: nowrap; padding-right: 50px">
                    卖点：
                </div>
                <div class="product_detail_title-content-info-content" style="text-align: end">
                    {{ detailInfo.sellingPoints }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name">平台扣点：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo.tax }}%
                </div>
            </div>
        </div>
        <div class="product_detail_title--heng"></div>
        <div class="findings_audit">
            <div class="findings_audit_title">入库审批</div>
            <div class="findings_audit_content">
                <div class="column" v-for="(item, index) in ceshi" :key="index">
                    <div class="circle" :style="{ 'background': item.color }"></div>
                    <div v-if="index !== ceshi.length - 1" class="line"
                        :style="{ 'border-left-color': index == 0 ? item.color : '#B8BECA' }"></div>
                    <div class="adopt_proposal" :style="{ 'color': item.color }">{{ item.title }}</div>
                    <div class="danger_name" :style="{ 'color': index == 0 ? '#1A1B1C' : '#B8BECA' }">{{ item.name }}
                    </div>
                    <div class="danger_date" :style="{ 'color': index == 0 ? '#1A1B1C' : '#B8BECA' }">{{ item.time }}
                    </div>
                </div>
            </div>
            <div class="buttonStatus" v-if="detailInfo.stockStatus == 0 && look !== 'look'">
                <div class="buttonStatus_left" @click="audLeft">
                    驳回
                </div>
                <div class="buttonStatus_right" @click="audRight" v-throttle:click>
                    入库
                </div>
            </div>
        </div>
        <van-overlay :show="overlayShow" @click="overlayShow = false" z-index="6001">
            <div class="wrapper" @click.stop>
                <div class="wrapper_div">
                    <van-image :src="colseImg" @click="close"></van-image>
                    <div class="title">驳回建议</div>
                    <van-form @submit="onSubmit">
                        <van-field maxlength="50" show-word-limit v-model="message" rows="6" label="" type="textarea"
                            placeholder="请输入驳回建议" :border="false"
                            :rules="[{ required: true, trigger: 'onBlur', message: '请输入驳回建议' }]" />
                        <van-button class="button" round block type="primary" :loading="loading" loading-text="执行中..."
                            native-type="submit" v-throttle:click>
                            提交确认
                        </van-button>
                    </van-form>
                </div>
            </div>
        </van-overlay>

    </div>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getEnvValue } from "@/utils/index";
import { showSuccessToast } from 'vant';
import { refuse } from '@/api/productHome/index'
import { getStockPcList } from '@/api/productHome/index'
import { showImagePreview, showFailToast } from "vant";
const loading = ref(false)
const route = useRoute();
const router = useRouter();
const detailInfo = ref<any>({});
const realSrcList = ref<string[]>([]);
const ticketSwiper = ref();
const overlayShow = ref(false)
const message = ref('')
// 机制
const hmMechanismsList = ref<any>({})
const hmMechanismsList1 = ref<any>({})
const hmMechanismsList2 = ref<any>({})

const ceshi = ref<any[]>([])
const errImg = new URL("@/assets/home/error.png", import.meta.url).href;
const colseImg = new URL("@/assets/approval/close.png", import.meta.url).href;


/** 图片放大 */
const enlargeImage = (index: number) => {
    showImagePreview({
        images: realSrcList.value,
        startPosition: index,
    });
};

/** 商品id */
const uniquekey = computed(() => {
    return route.params.id;
});

/** 消息中心查看传递的参数 */
const look = computed(() => {
    return route?.query?.look;
});

/** 多图片并发请求更改 */
const fetchImagesSequentially = async (real_src) => {
    for (const item of real_src) {
        if (item) {
            const url = getEnvValue("VITE_APP_PIC_URL") + item
            realSrcList.value.push(url);
        }
    }
};

/** 处理不同状态回显的颜色 */
const handleColor = (auditStatus: string) => {
    if (auditStatus == '0' || auditStatus == '20') {
        return '#B8BECA'
    } else if (auditStatus == '1') {
        return '#FC2540'
    } else {
        return '#0094FF'
    }
}

/** 处理不同状态回显的文字 */
const auditStatusNameById = (auditStatus: string, auditRemark: string, index: number) => {
    if (auditStatus == '0' && index == 0) {
        return '发起审批'
    } else if (auditStatus == '0' && index !== 0) {
        return '重新送审'
    } else if (auditStatus == '2') {
        return '已通过'
    } else if (auditStatus == '1') {
        return '已驳回,' + auditRemark
    } else if (auditStatus == '20') {
        return '变更主播'
    }
}

/** 处理不同状态回显的名字 */
const handleName = (auditStatus: string, auditor: string, createBy: string) => {
    if (auditStatus == '0' || auditStatus == '20') {
        return createBy
    } else {
        return auditor
    }
}

/** 获取详情 */
const getDetail = async () => {
    const res = await getStockPcList({ id: uniquekey.value });
    if (res.rows[0]) {
        detailInfo.value = res.rows[0];
        if (res.rows[0].hmMechanismsList.length) {
            hmMechanismsList.value = res.rows[0].hmMechanismsList[0]
            hmMechanismsList1.value = res.rows[0].hmMechanismsList[1]
            hmMechanismsList2.value = res.rows[0].hmMechanismsList[2]
        }
        if (res.rows[0].productImage) {
            const real_src = res.rows[0].productImage.split(",");
            fetchImagesSequentially(real_src);
        }
        res.rows[0].logList.forEach((item, index) => {
            item.title = auditStatusNameById(item.stockStatus, item.stockAuditRemark, index)
            item.status = item.stockStatus
            item.color = handleColor(item.stockStatus)
            item.name = handleName(item.stockStatus, item.stockName, item.recruiterName)
            item.time = item.createTime
        })
        ceshi.value = res.rows[0].logList.reverse()
    } else {
        showFailToast({
            message: '商品已下架，请刷新页面'
        })
    }
};
getDetail();



/** 驳回 */
const audLeft = async () => {
    overlayShow.value = true
};
/** 入库 */
const audRight = async () => {
    router.push({
        path: '/warehouseConfirmation/' + detailInfo.value.id,
        query: {
            productsId: detailInfo.value.productsId
        }
    })
};
/** 核价建议关闭 */
const close = () => {
    overlayShow.value = false
}
/** 驳回建议提交 */
const onSubmit = async () => {
    loading.value = true
    try {
        await refuse({ stockId: detailInfo.value.id, stockAuditRemark: message.value, productsId: detailInfo.value.productsId })
        showSuccessToast({ type: 'success', message: '驳回成功' });
        loading.value = false
        overlayShow.value = false
        router.back()
    } catch (error) {
        if (error == 'timeout') {
            showFailToast('驳回失败');
        }
        loading.value = false
    }
}

</script>
<style lang="less" scoped>
.button {
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 60%;
    margin-left: 20%;

    div {
        width: 31%;
        padding: 0 1px;
        text-align: center;
        border-radius: 5px;
        background-color: #0035ff;
        color: #fff;
    }

    .cancel {
        background-color: #f2f0f0;
        color: #000;
    }
}

.pop_div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .pop_div_item {
        width: 22%;
        padding: 0 1px;
        display: flex;
        justify-content: center;

        p {
            width: 80%;
            height: 20px;
            font-size: 10px;
            border: 1px solid #b6b6b6;
            color: #b6b6b6;
            text-align: center;
            line-height: 20px;
        }
    }
}

.product_detail {
    width: 100%;
    height: calc(100vh - 90px);
    background-color: #f6faff;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    align-content: flex-start;
    overflow-y: auto;

    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;

        .wrapper_div {
            width: 315px;
            background-color: #fff;
            border-radius: 5px;
            position: relative;

            :deep(.van-field__control) {
                background: #F6FAFF !important;
            }

            ::placeholder {
                font-size: 14px;
                color: #B8BECA;
            }

            .title {
                font-weight: 500;
                font-size: 16px;
                color: #1A1B1C;
                width: 100%;
                text-align: center;
                margin: 30px 0 20px 0;
            }

            .van-image {
                width: 10px;
                height: 10px;
                position: absolute;
                right: 18px;
                top: 18px;
            }

            :deep(.van-form) {
                min-height: 265px;
            }

            .button {
                color: #FFFFFF;
                font-size: 14px;
                width: 285px;
                height: 44px;
                background: #0094FF;
                border-radius: 23px;
                margin: auto;
                display: flex;
                justify-content: center;
                margin-top: 10px;
            }
        }
    }

    :deep(.van-nav-bar) {
        background-color: #1466ff;
        height: 46px !important;
        width: 100%;
        position: fixed !important;
    }

    :deep(.van-nav-bar__title) {
        color: #000;
    }

    :deep(.van-nav-bar__text) {
        color: #000;
    }

    :deep(.van-icon) {
        color: #000;
    }

    &_top {
        width: 98%;
        border-radius: 3px;
        height: 50%;
        background-color: #fff;
        padding: 20px;
        box-sizing: border-box;

        &_img {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            img {
                width: 200px;
                height: 200px;
            }

            :deep(.van-swipe) {
                width: 200px;
                height: 200px;
            }

            :deep(.van-image) {
                width: 200px;
                height: 200px;
            }
        }

        &_details {
            width: 100%;
            margin-top: 20px;

            .info {
                vertical-align: bottom;
                display: flex;
                align-items: center;

                .price {
                    font-weight: 500;
                    font-size: 21px;
                    color: #fc2540;
                }

                .costPrice {
                    color: #a3a3a3;
                    font-size: 10px;
                    margin-left: 10px;
                }



                .commission {
                    color: #ff0000;
                    font-size: 13px;
                    margin-left: auto;
                }
            }

            .liveStreamingMechanism {
                color: #a3a3a3;
                font-size: 10px;
                margin-left: 10px;
            }

            .styleName {
                font-weight: 700;
                line-height: 28px;
                font-size: 18px;
                color: #1a1b1c;
                margin-top: 5px;
                margin-bottom: 5px;

                .liveStreamingMechanisms {
                    width: 66px;
                    height: 26px;
                    background: #0094FF;
                    border-radius: 13px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #FFFFFF;
                    line-height: 26px;
                    text-align: center;
                    display: inline-block;
                }
            }

            .brand,
            .styleCode {
                font-weight: 400;
                font-size: 12px;
                color: #b8beca;
                margin-top: 5px;
            }

            .brand_right {
                margin-left: 20px;
            }
        }
    }

    &_title {
        padding: 10px 15px 0px 15px;
        width: 100%;
        font-weight: 500;
        font-size: 16px;
        color: #1a1b1c;
    }

    &_bottom {
        width: 98%;
        border-radius: 3px;
        background-color: #fff;
        padding: 15px 15px 60px 12px;
        box-sizing: border-box;

        .tilte {
            display: inline-block;
            margin: 8px 0;
            font-weight: 400;
            font-size: 14px;
            color: #1a1b1c;
            padding-bottom: 5px;
        }

        .product_image {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            width: 100%;
            margin-left: -10px;
            // margin-left: 10%;
            flex-wrap: wrap;

            .product_image_div {
                // margin-right: 5px;
            }
        }

        .vouche_image {
            width: 80%;
            margin-left: 10%;
        }
    }



    :deep(.product_detail_top) {
        width: 100% !important;
        height: auto;
    }

    .product_detail_top-image {
        width: 375px;
        height: 375px;
        z-index: 999;
        background-size: 100% 100%;
    }

    .product_detail_top_img {
        // border: solid 1px black;
        width: 340px;
        height: 340px;
    }


    .van-swipe-item {
        width: 340px !important;
        height: 340px !important;

        .van-image {
            width: 340px;
            height: 340px;
        }
    }

    .van-swipe {
        width: 340px;
        height: 340px;
    }


    .deails-size {
        display: flex;
        // margin-top: 10px;
    }

    .styleCode {
        margin-left: auto;
        font-weight: 400;
        font-size: 12px;
        color: #b8beca;
    }

    .merchant-style {
        display: flex;
        align-items: center;
        margin-top: 5px;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .merchant-style-size {
        font-size: 12px;
        color: #b8beca;
        line-height: 12px;
        display: flex;
        align-items: center;

        .merchant-style-btn {
            margin-left: 15px;
            width: 66px;
            height: 26px;
            background: #e7fdee;
            border-radius: 13px;
            color: #19d11b;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .launch {
        font-size: 12px;
        color: #0094FF;
    }

    .merchant-style-btn1 {
        margin-left: 10px;
        width: 66px;
        height: 26px;
        background: #ebf4ff;
        border-radius: 13px;
        color: #0094ff;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product_detail_title--content {
        // display: flex;
        // border: solid 1px black;
        width: 100%;
        background: #fff;
        padding: 15px;

        .mechanism_title {
            font-weight: 500;
            font-size: 14px;
            color: #0094FF;
            margin-top: 20px;
        }


    }

    .product_detail_title-content-size {
        font-weight: 500;
        font-size: 16px;
        color: #1a1b1c;
        // border: solid 1px black;
    }

    .product_detail_title--heng {
        width: 100%;
        height: 7px;
        background: #f6faff;
    }

    .findings_audit {
        width: 100%;
        // height: 188px;
        background-color: #fff;
        box-sizing: border-box;
        padding: 15px;

        .findings_audit_title {
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
        }

        .findings_audit_content {
            // height: 80px;
            width: 100%;
            display: flex;
            margin-top: 10px;
            justify-content: space-between;
            flex-wrap: wrap;

            .column {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                position: relative;
                line-height: 20px;

                .circle {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    margin-bottom: 30px;
                    margin-top: 3px;
                }

                .line {
                    height: calc(100% - 10px);
                    position: absolute;
                    border-left: 1px dashed #0094FF;
                    top: 13px;
                    left: 5px;
                }

                .adopt_proposal {
                    font-size: 12px;
                    width: 123px;
                    word-wrap: break-word
                }

                .danger_name {
                    font-size: 12px;
                    color: #B8BECA;
                    width: 40px;
                }

                .danger_date {
                    font-size: 12px;
                    color: #B8BECA;
                    width: 120px;
                }

            }

        }

        .buttonStatus {
            width: 100%;
            height: 40px;
            display: flex;
            line-height: 40px;
            justify-content: space-around;
            margin-top: 20px;

            .buttonStatus_left {
                background-color: #fff;
                color: #0094FF;
                text-align: center;
                border-radius: 23px;
                width: 40%;
                border: 1px solid #0094FF;
            }

            .buttonStatus_right {
                color: #fff;
                text-align: center;
                border-radius: 23px;
                width: 40%;
                background: #0094FF;
            }
        }
    }

    .product_detail_title-content-info {
        margin-top: 20px;
        display: flex;
    }

    .product_detail_title-content-info-name {
        font-weight: 400;
        font-size: 14px;
        color: #1a1b1c;
        line-height: 14px;
    }

    .product_detail_title-content-info-content {
        font-weight: 400;
        font-size: 14px;
        color: #b8beca;
        line-height: 14px;
        margin-left: auto;
        word-break: break-all;
    }

    .product_image_div {
        // border: solid 1px black;
        // margin-left: 10px;
    }

    .vouche_image {
        // border: solid 1px black;
        width: 100%;
        margin-left: -10px;
    }

    .vouche_image-style {
        width: 90px;
        height: 90px;
        margin-left: 10px;
        // border: solid 1px black;
    }

    :deep(.van-nav-bar__text) {
        color: #0094ff !important;
    }

    :deep(.van-nav-bar__right) {
        color: #0094FF;
    }
}
</style>